<template>
  <div class="container">
    <div class="header">
      <img src="@/imgs/select_logo.png" alt="" />
      <a class="quit" @click="quit">
        <img src="@/imgs/quit.png" alt="" />
        <span>退出系统</span>
      </a>
    </div>
    <div class="footer">
      <div class="box">
        <router-link to="/dean/系主任/firstPage"
          ><button class="profession" @click="role">
            {{ name[0] }}
          </button></router-link
        >
        <router-link to="/guideTeacher/指导老师/firstPage"
          ><button class="profession" @click="role">
            {{ name[1] }}
          </button></router-link
        >
        <router-link to="/reviewTeacher/评阅老师/firstPage"
          ><button class="profession" @click="role">
            {{ name[2] }}
          </button></router-link
        >
        <router-link
          :to="{
            path: '/thesisSecretary/论文秘书/firstPage',
          }"
          ><button class="profession" @click="role">
            {{ name[3] }}
          </button></router-link
        >
        <router-link
          :to="{
            path: '/defenseSecretary/答辩秘书/firstPage',
          }"
          ><button class="profession" @click="role">
            {{ name[4] }}
          </button></router-link
        >
        <router-link
          :to="{
            path: '/defenseTeamLeader/答辩组组长/firstPage',
          }"
          ><button class="profession" @click="role">
            {{ name[5] }}
          </button></router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'degSelect',
  data() {
    return {
      name: [
        '系主任',
        '指导老师',
        '评阅老师',
        '论文秘书',
        '答辩秘书',
        '答辩组组长',
      ],
    };
  },
  methods: {
    quit() {
      window.sessionStorage.clear();
      this.$router.push('/login');
    },
    role() {
      this.$message({
        message: '角色登入成功',
        type: 'success',
        duration: 1000,
      });
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.header,
.footer {
  position: relative;
  width: 100%;
  min-height: 240px;
}

.header {
  height: 40%;
  background: url('@/imgs/select_header.jpg') no-repeat center;
  background-size: cover;
  /* background-image: radial-gradient(#1685a9, #44cef6); */
}

.header img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header .quit {
  position: absolute;
  height: 44px;
  line-height: 44px;
  width: 120px;
  font-size: 16px;
  border-radius: 22px;
  right: 20px;
  top: 20px;
  background-color: rgb(228, 228, 228);
  cursor: pointer;
  font-weight: 800;
}

.header .quit img {
  height: 22px;
  width: 22px;
  margin-left: -40px;
}

.header .quit span {
  float: left;
  margin-left: 40px;
}

.footer {
  height: 60%;
  background: url('@/imgs/select_footer.jpg') no-repeat center;
  background-size: cover;
}

.footer .box {
  display: flex;
  height: 40%;
  width: 45%;
  min-width: 420px;
  padding-top: 60px;
  margin: 0 auto;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}

.profession {
  height: 44px;
  line-height: 44px;
  padding: 0 25px;
  font-size: 18px;
  color: #ffffff;
  background-color: #009688;
  border: none;
  border-radius: 22px;
}

.profession:hover {
  background-color: #1bd1a5;
}
</style>
